<template>
	<view>
		<u-sticky bgColor="#ffffff">
			<view class="flexbetween mainpadding">
				<view class="flexcolumn ershil" :class="currentdate==item?'focus':'nofocus'"
					v-for="(item,index) in dateList" :key="index" @click="changeTime(item)">
					<view v-if="index==0">今天</view>
					<view v-if="index==1">明天</view>
					<view v-if="index!=0 && index!=1">{{getCurrentDayOfWeek(item)}}</view>
					<view>{{convertDate(item)}}</view>
				</view>
			</view>
		</u-sticky>
		<view class="mainpadding_top ffffff" v-for="item in touristTimeAll" :key="item.id">
			<view class="flexbetween">
				<view class="bigtext xiaohei yhxk fonweight" style="width: 400rpx;">{{item.tourist.name}}</view>
				<view class="xiaolan sanshier">
					<text class="ershil">￥</text>
					<text>{{item.tourist.price}}</text>
				</view>
			</view>
			<view class="xiahuaxian">
				<!-- 上车点 -->
				<view class="xiaohei ershiba margin_top fonweight">上车点</view>
				<view class="margin_top1" v-for="ite in item.touristsite_start" :key="ite.id">
					<text class="lvdian margin_right2"></text>
					<text class="xiaohei ershiba yhxk">{{ite.tourist_site_time}}{{ite.address_name}}</text>
					<view class=" xiaohui margin_top1 ershiba">详细地址{{ite.address}}</view>
				</view>
				<!-- 目的地 -->
				<view class="xiaohei ershiba margin_top fonweight">下车点</view>
				<view class="margin_top1" v-for="ite in item.touristsite_end" :key="ite.id">
					<text class="huangdian margin_right2"></text>
					<text class="xiaohei ershiba ">{{ite.tourist_site_time}}{{ite.address_name}}</text>
					<view class=" xiaohui margin_top1 ershiba">详细地址{{ite.address}}</view>
				</view>
			</view>
			<view class="ershiba margin_top flexbetween xiaohui">
				<view class="flexleft">
					<!-- <text class="margin_right3">余票：{{item.sy_num}}</text> -->
					<view class="flexleft" @click="callphone(item.tel)">
						<u-icon name="phone-fill" color="#2979ff" size="14"></u-icon>
						<view class="xiaolan">随车电话</view>
					</view>
				</view>
				<view class="buybtn" v-if="item.sy_num!=0" @click="submit(item)">立即预定</view>
				<view class="buybtn" style="background-color: #999;" v-if="item.sy_num==0">已售完</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				dateList: [],
				touristTimeAll: {},
				currentdate: "", //当前选中日期
				listid: "",
				content:""
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.dateList = this.getNextFourDays()
			this.currentdate = this.dateList[0]
			this.touristTimeIndex(this.currentdate)
			this.getInfo()
		},
		methods: {
			getInfo(){
				httpRequest.request('/api/index/getConfigInfoItem','POST',{
					 pidtype:"about_set",
					 type:"orderwxts"
				}).then(res => {
					this.content = res.data
				})
			},
			submit(item){
				uni.navigateTo({
					url:"/pages/index/xuanzesxcd?id="+item.id+"&currentdate="+this.currentdate
				})
			},
			touristTimeIndex(date) {
				httpRequest.request('/api/Travelcl/touristTimeIndex', 'GET', {
					date,
					tourist_id: this.listid
				}).then(res => {
					this.touristTimeAll = res.data
				})
			},
			changeTime(item) {
				if (item == this.currentdate) return false
				this.currentdate = item
				this.touristTimeIndex(this.currentdate)
			},
			getNextFourDays() {
				let dates = [];
				for (let i = 0; i < 5; i++) {
					let date = new Date();
					date.setDate(date.getDate() + i);
					dates.push(date.toISOString().split('T')[0]);
				}
				return dates;
			},
			// yyyy-mm-dd转换mm/dd
			convertDate(dateString) {
				const parts = dateString.split('-');
				const year = parts[0]; // 不需要转换
				const month = parts[1]; // 需要转换为 mm/dd 格式
				const day = parts[2]; // 需要转换为 mm/dd 格式
				// 使用两位数表示月份和日期
				return `${month.padStart(2, '0')}/${day.padStart(2, '0')}`;
			},
			// 年月日转换周几
			getCurrentDayOfWeek(val) {
				const today = new Date(val);
				const dayOfWeek = today.getDay();
				const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				return daysOfWeek[dayOfWeek];
			}
		}
	}
</script>

<style>
	.buybtn{
		border-radius: 15rpx;
		background-color: #3478f5;
		padding: 15rpx 30rpx;
		color: #fff;
		font-size: 28rpx;
	}
	.focus {
		color: #fff;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		background-color: #3478f5;
	}

	.nofocus {
		color: #333;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
	}
</style>